 class Observer{
     constructor(data){
         this.observer(data)
     }
     observer(data){
         // 要对data 的数据 改成get 和 set 的形式
         if(!data || typeof data !== 'object'){
             return
         }
         // 要将数据  一一劫持   先获取到 data 的key 和value
         Object.keys(data).forEach(key=>{
            // 劫持
            this.defineReactive(data,key,data[key])
            this.observer(data[key]) // 深度劫持
         })
     }
     // 定义响应式
     defineReactive(obj,key,value){
         let that = this;
         let dep = new Dep(); // 每个 变化的数据 都会对应一个数组 ， 这个数组是存放所有更新的操作
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){
                 Dep.target&&dep.addSub(Dep.target);
                 return value;
            },
            set( newValue ){
               if(newValue != value){ // 当给data 属性中设置值的时候  更改获取属性的值 
                     //这里的this 不是 实例
                 console.log(newValue,"=====")

                   that.observer(newValue)// 如果是对象继续劫持
                   value = newValue;
                   dep.notify() // 通知所有人数据更新了
               }
            }
        })
     }
 }


  class Dep {
      constructor(){
          // 订阅的数组
          this.subs =[]
      }
      addSub(watcher){ 
          this.subs.push(watcher)
      }
      notify(){
        this.subs.forEach(watcher => watcher.update())
     }

  }